/* eslint-disable array-callback-return */
import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button } from 'antd';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';

const { Description } = DescriptionList;
@connect(({ custinfo, loading, publicdata }) => ({
  loading: loading.models.custinfo,
  dictCode: publicdata.dictCode,
  detailList: custinfo.detailList,
}))
@Form.create()
class Detail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dictList: ['INDST_CODE', 'CORP_NATURE'], // 字典
    };
  }

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { dictList } = this.state;
    const id = queryString.parse(location.search).custId;
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: dictList,
    }).then(data => {
      dictList.map(dict => {
        this.setState({ [dict]: data[dict] });
      });
      this.getDetail(id);
    });
  }

  // 获取详情数据
  getDetail = mdCustId => {
    const { dispatch, dictCode } = this.props;
    dispatch({
      type: 'custinfo/getCustDetail',
      payload: {
        mdCustId,
      },
    }).then(res => {
      dispatch({
        type: 'custinfo/matchName',
        payload: {
          detailList: res.data,
          dictCode,
        },
      });
    });
  };

  render() {
    const { detailList } = this.props;
    return (
      <PageHeaderWrapper>
        <Card title="客户信息详情">
          <DescriptionList>
            <Description term="客户名称 ">{detailList.name || '--'}</Description>
            <Description term="公司类型">{detailList.corpNature || '--'}</Description>
            <Description term="行业分类">{detailList.industryCode || '--'}</Description>
            <Description term="统一社会信用代码">{detailList.uniCreditCode || '--'}</Description>
          </DescriptionList>
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={() => window.history.back()}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default Detail;
